<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 信息流管理 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-row>
          <el-button size="small" type="primary" :loading="excelLoad" @click="openPopup">新增</el-button>
          <el-button size="small" type="primary">
            <a href="https://daidaiwang-1307355890.cos.ap-beijing.myqcloud.com/%E4%BF%A1%E6%81%AF%E6%B5%81%E5%AF%B9%E6%8E%A5.rar"
             style="color:#fff;" target="_black">下载对接文档</a>
          </el-button>
        </el-row>
        <div style="margin-top: 15px">
          <el-input v-model="query.name" placeholder="请输入名称" class="handle-input mr10"></el-input>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </div>
      </div>
      <!-- 列表 -->
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        class="table"
        ref="tableList"
        header-cell-class-name="table-header">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="tName" label="信息流名称" width="180"></el-table-column>
        <el-table-column prop="tKey" label="密钥（PID）" width="170"></el-table-column>
        <!-- <el-table-column label="时间" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column> -->
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-s-operation" class="bule" @click="viewDetail(scope.row.tId,scope.row.tName,scope.row.tKey)">修改</el-button>
            <!-- <el-button type="text" icon="el-icon-delete" class="red" @click="viewDetail(scope.row.id)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total,sizes, prev, pager, next"
          :current-page="query.page"
          :page-size="query.limit"
          :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
          :total="totalCount"
          :pager-count="5"
          @size-change="handlePageSelectChange"
          @current-change="handlePageChange"
          @prev-click="handlePageChange"
          @next-click="handlePageChange"></el-pagination>
      </div>
    </div>
    
    <!-- 新增弹框 -->
    <el-dialog title="创建信息流" :visible.sync="editVisible" width="30%" :close-on-click-modal="false">
      <el-form ref="formName" :model="informationFromAdd" :rules="informationRules" label-width="150px">
        <el-form-item label="信息流名称" prop="name">
          <el-input v-model="informationFromAdd.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetFun">取 消</el-button>
        <el-button @click="commitAdd" type="primary">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 详情弹框 -->
    <el-dialog title="详情" :visible.sync="detailVisible" width="30%" :close-on-click-modal="false">
      <el-form
        ref="formNameUpDate"
        :model="informationFromUpdate"
        :rules="informationRulesUp"
        label-width="150px">
        <el-form-item label="信息流名称" prop="upName">
          <el-input v-model="informationFromUpdate.upName"></el-input>
        </el-form-item>
        <el-form-item label="信息流密钥" prop="name">
          <el-input v-model="informationFromUpdate.key" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetFun">取 消</el-button>
        <el-button @click="updateInformation" type="primary">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { configAddInformation,configInformationList,configUpdateInformation } from '../../../api/index';
import Storage from '../../../utils/localStorage';


export default {
  data() {
    return {
      informationFromAdd: {
        name: ''
      },
      informationRules: {
        name: [
          { required: true, message: '请输入信息流名称', trigger: 'blur' },
        ],
      },
      informationFromUpdate: {
        upName:'',
        key: ''
      },
      informationRulesUp: {
        upName: [
          { required: true, message: '请输入信息流名称', trigger: 'blur' },
        ],
      },
      comListData: [],
      detailVisible: false,
      editVisible: false,
      loading: true,
      detailQuery: {
        total: 0,
        page: 1,
        limit: 10,
        kw: ''
      },
      query: {
        page: 1,
        limit: 10,
        name: '',
      },
      totalCount: 0,
      totalPage: 0,
      tableData: [],

      excelLoad: false,
      uploadHeader: { 'Authorization': Storage.getItem('token') ? Storage.getItem('token') : "1" },
      upDateID: ''
    };
  },
  created() {
    this.getData();
  },
  watch: {
    $route: 'getData'
  },
  methods: {
    // 查看 、 修改
    viewDetail(id,name,key){
      this.detailVisible = true
      this.informationFromUpdate.upName = name
      this.informationFromUpdate.key = key
      this.upDateID = id
      console.log(id,name);
    },
    // 修改
    updateInformation(){
      
      this.$refs.formNameUpDate.validate((valid) => {
        if (valid) {
          configUpdateInformation({
            id: this.upDateID,
            name: this.informationFromUpdate.upName
          }).then( res => {
            if (res.code === 0) {
              this.$message.success("修改成功");
              this.getData();
              this.detailVisible = false
            } else {
              this.$message.error("修改失败")
            }
          })
        }
      })
    },
    // 新增
    commitAdd(){
      this.$refs.formName.validate((valid) => {
        if (valid) {
          configAddInformation({name: this.informationFromAdd.name}).then(res => {
            if (res.code === 0) {
              this.$message.success("新增成功");
              this.getData();
              this.editVisible = false
            } else {
              this.$message.error("新增失败")
            }
          })
        }
      })
    },
    resetFun(){},
    openPopup(){
      this.editVisible = true
    },
    handleCurrentChange(val){
      this.detailQuery.page = val
    },
    handleSizeChange(val){
      this.detailQuery.limit = val
    },
    // 获取 easy-mock 的模拟数据
    getData() {
      this.loading = true;
      configInformationList(this.query).then((res) => {
        this.loading = false;
        if (res.code === 0) {
          this.tableData = res.userList;
          this.totalCount = res.totalCount;
          this.totalPage = res.totalPage;
        } else {
          this.$message(res.msg);
        }
      });
    },
    // 分页切换
    handlePageChange(val) {
      this.loading = true;
      this.$set(this.query, 'page', val);
      this.getData();
    },
    // 分页调整
    handlePageSelectChange(val) {
      this.loading = true;
      this.$set(this.query, 'limit', val);
      this.getData();
    },
    //搜索
    handleSearch() {
      this.query.page = 1;
      this.getData();
    },
  },
  mounted() {
  },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
/* .table {
    width: 100%;
    font-size: 14px;
} */
.bule {
    color: #409EFF;
}
.red {
  color: #f00;
}
.el-icon-star-on >>> .el-loading-spinner {
    margin-top: -10px;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.IconColor {
    color: #e6a23c;
}
/deep/ :focus {
    outline: 0;
}
.el-drawer__title {
    color: #72767b;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 25px;
    padding: 20px 35px 0;
}
.el-drawer__title span {
    font-size: 14px;
    color: #66b1ff;
    margin: 20px;
    cursor: pointer;
}
.el-radio {
    margin-right: 0px;
}
.beizhu_text {
    height: 794px;
    overflow: auto;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-left: 35px;
    padding: 20px;
    box-sizing: border-box;
    color: #72767b;
    font-size: 14px;
}
.beizhu_text > div:first-child {
    padding-top: 0;
}
.beizhu_text > div {
    padding: 5px 0;
}
.el-icon-star-on {
    font-size: 20px;
}
.qrCodeUrl >>> img {
    margin: 0 auto;
}
</style>
